= render 'devise/shared/tab_single', tab_title: _('Two-factor authentication') if Feature.disabled?(:restyle_login_page, @project)
.login-box.gl-p-5
  .login-body
    - if @user.two_factor_enabled?
      = gitlab_ui_form_for(resource, as: resource_name, url: session_path(resource_name), method: :post, html: { class: "edit_user gl-show-field-errors js-2fa-form #{'hidden' if @user.two_factor_webauthn_enabled?}" }) do |f|
        .form-group
          = f.label :otp_attempt, _('Enter verification code')
          = f.text_field :otp_attempt, class: 'form-control gl-form-input', required: true, autofocus: true, autocomplete: 'off', inputmode: 'numeric', title: _('This field is required.'), data: { qa_selector: 'two_fa_code_field' }
          %p.form-text.text-muted.hint
            = _("Enter the code from your two-factor authenticator app. If you've lost your device, you can enter one of your recovery codes.")

        - if remember_me_enabled?
          - resource_params = params[resource_name].presence || params
          = f.hidden_field :remember_me, value: resource_params.fetch(:remember_me, 0)

        = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, block: true, button_options: { data: { qa_selector: 'verify_code_button' } }) do
          = _("Verify code")

    - if @user.two_factor_webauthn_enabled?
      = render "authentication/authenticate", params: params, resource: resource, resource_name: resource_name, render_remember_me: true, target_path: new_user_session_path
